<div id="dashboard-div" fxLayout="row" fxLayout.xs="column" fxLayoutGap="20px" fxLayoutGap.xs="20px">

  <div fxFlex="66%" fxFlexOrder="1" fxFlexOrder.xs="2">
    <mat-card id="log">
      <mat-card-title>Server events
        <mat-slide-toggle title="Lock Scroll" [(ngModel)]="lockScroll" style="float: right; margin-left: auto;">
          <mat-icon>lock_outline</mat-icon>
        </mat-slide-toggle>
      </mat-card-title>
      <mat-divider></mat-divider>
      <mat-card-content #scrollMe id="log-content">
        <ul>
          <li *ngFor="let i of info">
            <p>{{i}}</p>
          </li>
        </ul>
      </mat-card-content>
    </mat-card>
  </div>

  <div fxFlex="33%" fxFlex.xs="auto" fxFlexOrder="2" fxFlexOrder.xs="1">
    <mat-card id="video-loop">
      <mat-card-title>Test the connection
        <button id="test-btn" mat-raised-button [ngClass]="testStatus == 'DISCONNECTED' ? 'blue' : (testStatus == 'PLAYING' ? 'yellow' : 'disabled')" (click)="toggleTestVideo()" [disabled]="testStatus==='CONNECTING' || testStatus==='CONNECTED'">{{testButton}}</button>
      </mat-card-title>
      <mat-divider></mat-divider>
      <mat-card-content>
        <div id="mirrored-video">
          <div *ngIf="showSpinner" id="loader">
            <div class="loader-1 center"><span></span></div>
          </div>
          <div *ngIf="session" id="tick-div">
            <div id="tooltip-tick" *ngIf="testStatus=='PLAYING'" matTooltip="The connection is successful" matTooltipPosition="below"></div>
            <div [ngClass]="testStatus=='PLAYING' ? 'trigger drawn' : 'trigger'"></div>
            <svg version="1.1" id="tick" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
              viewBox="-1 -1 39 39" style="enable-background:new 0 0 37 37;" xml:space="preserve">
              <path class="circ path" style="fill:none;stroke:#06d362;stroke-width:4;stroke-linejoin:round;stroke-miterlimit:10;" d="
	M30.5,6.5L30.5,6.5c6.6,6.6,6.6,17.4,0,24l0,0c-6.6,6.6-17.4,6.6-24,0l0,0c-6.6-6.6-6.6-17.4,0-24l0,0C13.1-0.2,23.9-0.2,30.5,6.5z"
              />
              <polyline class="tick path" style="fill:none;stroke:#06d362;stroke-width:4;stroke-linejoin:round;stroke-miterlimit:10;" points="
	11.6,20 15.9,24.2 26.4,13.8 " />
            </svg>
          </div>
        </div>
        <div id="msg-chain"><p *ngFor="let msg of msgChain">{{msg}}</p></div>
      </mat-card-content>
    </mat-card>
  </div>
</div>
